<template>
  <div class="tuijiangeshou">
    <h2>推荐</h2>
    <ul @click="getlist(-1, -1)">
      <li class="active" @click="getlist(-1, -1)"><span>推荐歌手</span></li>
      <li @click="getlist(-1, -1)"><span>入住歌手</span></li>
    </ul>
    <h2 @click="getlist(-1, 7)">华语</h2>
    <ul>
      <li class="active" @click="getlist(1, 7)"><span>华语男歌手</span></li>
      <li @click="getlist(2, 7)"><span>华语女歌手</span></li>
      <li @click="getlist(3, 7)"><span>华语组合/乐队</span></li>
    </ul>

    <h2 @click="getlist(-1, 96)">欧美</h2>
    <ul>
      <li class="active" @click="getlist(1, 96)"><span>欧美男歌手</span></li>
      <li @click="getlist(2, 96)"><span>欧美女歌手</span></li>
      <li @click="getlist(3, 96)"><span>欧美组合/乐队</span></li>
    </ul>
    <h2 @click="getlist(-1, 8)">日本</h2>
    <ul>
      <li class="active" @click="getlist(1, 8)"><span>日本男歌手</span></li>
      <li @click="getlist(2, 8)"><span>日本女歌手</span></li>
      <li @click="getlist(3, 8)"><span>日本组合/乐队</span></li>
    </ul>
    <h2>韩国</h2>
    <ul @click="getlist(-1, 16)">
      <li class="active" @click="getlist(1, 16)"><span>韩国男歌手</span></li>
      <li @click="getlist(2, 16)"><span>韩国女歌手</span></li>
      <li @click="getlist(3, 16)"><span>韩国组合/乐队</span></li>
    </ul>
    <h2>其他</h2>
    <ul @click="getlist(-1, 0)">
      <li class="active" @click="getlist(1, 0)"><span>其他男歌手</span></li>
      <li @click="getlist(2, 0)"><span>其他女歌手</span></li>
      <li @click="getlist(3, 0)"><span>其他组合/乐队</span></li>
    </ul>
  </div>
</template>

<script>
import { Geshou, Getgeshouban } from "@/request/api";
export default {
  data() {
    return {
      // 入住歌手
      geshourz: {
        type: -1,
        area: -1,
      },
    };
  },
  methods: {
    getlist(type, area) {
      Geshou({ type, area }).then((res) => {
        if (res.data.code === 200) {
          this.$store.commit("Channerzgslist", res.data.artists);
        }
      });
      let qre = 1;
      if (area === -1 || area === 7 || area === 0) {
        qre = 1;
      }
      if (area === 96) {
        qre = 2;
      }
      if (area === 8) {
        qre = 4;
      }
      if (area === 16) {
        qre = 3;
      }
      console.log(qre);
      Getgeshouban({ type: qre }).then((res) => {
        console.log(res.data);
        this.$store.commit("CHannergeshouname", res.data.list.artists);
      });
    },
  },
  created() {},
};
</script>
 
<style lang = "less" scoped>
@import "@/assets/base.less";
.tuijiangeshou {
  width: 180px;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;

  &:first-of-type {
    padding-top: 40px;
  }
  h2 {
    width: 160px;
    height: 25px;
    font-size: 16px;
    margin-left: 10px;
    padding-top: 10px;
    text-indent: 1em;
  }
  ul {
    margin-left: 10px;
    width: 160px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    li {
      height: 30px;
      background-image: url("@/assets/images/singer.png");
      background-position: 0 -29px;
      line-height: 30px;
      &.active {
        background-position: 0 0;
      }
      span {
        margin-left: 25px;
      }
    }
  }
}
</style>